<template>
    <div>
        <div id="myChart" style="float: left;text-align: center;" :style="{width: '700px', height: '700px'}"></div>
        <div id="cyChart" style="float: right;text-align: center;" :style="{width: '700px', height: '700px'}"></div>
    </div>
</template>
<script>
import { getLogCount,getTransCount } from '@/api'
export default {
  name: 'Echarts',
  mounted(){
    let _this = this
    getLogCount().then(function(response){
      // 基于准备好的dom，初始化echarts实例
      let myChart = _this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {text: '日志记录柱状图'},
        textAlign:'auto',
        xAxis: {
            type: 'category',
            data: response.data.names
        },
        yAxis: {
            type: 'value',
            name: '记录数',
            minInterval: 1,
            max: response.data.total*2,
            min: 0,
        },
        series: [
            {
            data: response.data.values,
            type: 'bar'
            }
        ]
      });
    })
    getTransCount().then(function(response){
      // 基于准备好的dom，初始化echarts实例
      let myChart = _this.$echarts.init(document.getElementById('cyChart'))
      // 绘制图表
      myChart.setOption({
        title: {text: '物流记录柱状图'},
        textAlign:'auto',
        xAxis: {
            type: 'category',
            data: response.data.names
        },
        yAxis: {
            type: 'value',
            name: '记录数',
            minInterval: 1,
            max: response.data.total*2,
            min: 0,
        },
        series: [
            {
            data: response.data.values,
            type: 'bar'
            }
        ]
      });
    })
  }
}
</script>